CSS Egyedi Kiemelés API: A Több Tartományú Szövegkijelölés Mesterfokon a Dinamikus Felhasználói Felületekért

A CSS Egyedi Kiemelés API egy hatékony új eszköz a webfejlesztők számára, amely példátlan irányítást tesz lehetővé a szövegkijelölés és a kiemelés felett a webes alkalmazásokon belül. A böngésző alapvető kijelölési képességeivel ellentétben ez az API lehetővé teszi a fejlesztők számára, hogy egyedi kiemelési stílusokat definiáljanak, és programozottan kezeljék a többszörös kijelölési tartományokat. Ez lehetőségek világát nyitja meg a gazdag, interaktív és akadálymentes felhasználói felületek létrehozásához. Ez az útmutató átfogó áttekintést nyújt az API-ról, feltárva annak képességeit, felhasználási eseteit és implementációs részleteit, mindezt globális perspektívával.

A CSS Egyedi Kiemelés API Alapjainak Értelmezése

Mielőtt belemerülnénk a komplex forgatókönyvekbe, elengedhetetlen az API alapvető fogalmainak megértése. Lényegében a CSS Egyedi Kiemelés API számos új CSS ál-elemet vezet be, beleértve:

• ::selection: A dokumentumnak azt a részét képviseli, amelyet a felhasználó kijelölt. Ez már régóta elérhető, lehetővé téve a szövegkijelölések alapvető stílusozását.
• ::highlight: Egy általánosabb ál-elem a kiemelt tartományok stílusozására. Ez a kulcs az új API erejéhez. Mostantól névvel ellátott kiemeléseket hozhat létre, és egyedi stílusokat alkalmazhat mindegyikre.
• ::target-text: A dokumentumnak azt a részét képviseli, amelyet egy URI-fragmentum (pl. #section-title) céloz meg. Lehetővé teszi, hogy stílusozza az oldal azon szakaszát, amelyre a felhasználó egy hivatkozáson keresztül görgetett.
• ::spelling-error: A felhasználói ügynök által helyesírási hibákat tartalmazóként azonosított szöveget képviseli. Stílusozási vezérlést kínál a helyesírási hibajelzők felett.
• ::grammar-error: A felhasználói ügynök által nyelvtani hibákat tartalmazóként azonosított szöveget képviseli. Stílusozási vezérlést kínál a nyelvtani hibajelzők felett.

A ::highlight ál-elem az API igáslova. Lehetővé teszi, hogy névvel ellátott kiemeléseket definiáljon a CSS-ben, majd ezeket a kiemeléseket a JavaScript segítségével alkalmazza a szöveg konkrét tartományaira.

Kulcsfontosságú Fogalmak: Tartományok és Kiemelések

Az API a tartományok és a kiemelések fogalmai körül forog:

• Tartomány: A dokumentumon belüli szöveg egy összefüggő szakasza. A JavaScriptben a Range objektum képviseli.
• Kiemelés: Egy névvel ellátott stílus, amelyet egy vagy több tartományra alkalmaznak. A CSS-ben a ::highlight(highlight-name) ál-elemmel van definiálva, és a JavaScriptben a Highlight és a HighlightRegistry API-kon keresztül manipulálható.

Egyedi Kiemelések Beállítása CSS-sel

Az első lépés az egyedi kiemelési stílusok definiálása a CSS-ben. Ezt a ::highlight() ál-elemmel teheti meg.

            
::highlight(search-result) {
  background-color: yellow;
  color: black;
}

::highlight(important-term) {
  background-color: lightblue;
  font-weight: bold;
}

            

              
                Copy
              
            
          

Ebben a példában két egyedi kiemelési stílust definiáltunk: search-result és important-term. A search-result kiemelés sárga hátteret alkalmaz fekete szöveggel, míg az important-term kiemelés világoskék hátteret használ, és félkövérré teszi a szöveget. Bármilyen CSS tulajdonságot definiálhat ezeken a kiemelési stílusokon belül.

Kiemelések Kezelése JavaScripttel

Miután definiálta a kiemelési stílusokat a CSS-ben, a JavaScript segítségével alkalmazhatja azokat a szöveg konkrét tartományaira. A Highlight és a HighlightRegistry API-k biztosítják ehhez az eszközöket.

A HighlightRegistry

A HighlightRegistry egy globális objektum, amely a dokumentumban lévő összes kiemelést kezeli. A CSS interfészen keresztül érheti el:

            
const highlightRegistry = CSS.highlights;

            

              
                Copy
              
            
          

Kiemelések Létrehozása

Kiemelés létrehozásához használja a Highlight konstruktort:

            
const highlight = new Highlight();

            

              
                Copy
              
            
          

Kezdetben egy kiemeléshez nincsenek tartományok társítva. A addRange() metódus segítségével kell tartományokat hozzáadnia a kiemeléshez.

Tartományok Hozzáadása egy Kiemeléshez

Ahhoz, hogy hozzáadjon egy tartományt egy kiemeléshez, először létre kell hoznia egy Range objektumot. Ezt a document.createRange() metódussal teheti meg:

            
const range = document.createRange();
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

highlight.addRange(range);

            

              
                Copy
              
            
          

Ahol:

• startNode: A DOM csomópont, ahol a tartomány kezdődik.
• startOffset: A karakter eltolás a startNode-on belül, ahol a tartomány kezdődik.
• endNode: A DOM csomópont, ahol a tartomány véget ér.
• endOffset: A karakter eltolás az endNode-on belül, ahol a tartomány véget ér.

Példa: Keresési Találatok Kiemelése

Tegyük fel, hogy van egy szövegrész, és ki szeretné emelni egy keresési kifejezés összes előfordulását. Íme, hogyan teheti meg:

            
function highlightSearchResults(searchTerm, element) {
  const text = element.textContent;
  let index = text.indexOf(searchTerm);

  if (index === -1) {
    return; // A keresési kifejezés nem található
  }

  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + searchTerm.length);
    highlight.addRange(range);
    index = text.indexOf(searchTerm, index + 1);
  }

  // Alkalmazza a 'search-result' kiemelési stílust
  highlightRegistry.set('search-result', highlight);
}

const contentElement = document.getElementById('content');
highlightSearchResults('example', contentElement);

            

              
                Copy
              
            
          

Ez a kódrészlet megtalálja az "example" szó összes előfordulását a "content" azonosítójú elemen belül, és alkalmazza rájuk a search-result kiemelési stílust.

Tartományok és Kiemelések Eltávolítása

A deleteRange() metódus segítségével eltávolíthat tartományokat egy kiemelésből:

            
highlight.deleteRange(range);

            

              
                Copy
              
            
          

A clear() metódus segítségével az összes tartományt eltávolíthatja egy kiemelésből:

            
highlight.clear();

            

              
                Copy
              
            
          

A kiemelés teljes eltávolításához használhatja a HighlightRegistry delete() metódusát:

            
highlightRegistry.delete('search-result');

            

              
                Copy
              
            
          

Haladó Felhasználási Esetek és Megfontolások

A CSS Egyedi Kiemelés API egy hatékony eszköz, amely számos speciális forgatókönyvben használható.

Kollaboratív Szerkesztés

A kollaboratív szerkesztő alkalmazásokban az API segítségével kiemelheti a különböző felhasználók által végrehajtott módosításokat. Minden felhasználó rendelkezhet saját egyedi kiemelési stílusával, lehetővé téve, hogy könnyen lássa, ki melyik módosítást végezte el. Például egy kollaboratív dokumentumszerkesztő, amelyet több országban dolgozó csapatok használnak, különböző kiemelési színeket használhat a japán, német és brazil csapat tagjai által végzett szerkesztések megjelenítésére.

Kódszerkesztők

A kódszerkesztők kihasználhatják az API-t a szintaxiskiemeléshez. A különböző szintaxiselemek (pl. kulcsszavak, operátorok, megjegyzések) különböző kiemelési stílusokhoz rendelhetők. A modern kódszerkesztők gyakran összetett szintaxiskiemelési szabályokkal rendelkeznek, és ez az API pontosabb és testreszabhatóbb vezérlést tesz lehetővé, mint a hagyományos módszerek.

Akadálymentesség

Az API használható az akadálymentesség javítására. Például kiemelheti az aktuálisan fókuszban lévő elemet vagy a képernyőolvasó által felolvasott szöveget. Ne feledje, hogy biztosítson megfelelő színkontrasztot a kiemelés háttere és a szöveg színe között a látássérült felhasználók számára. A WCAG (Web Content Accessibility Guidelines) konkrét irányelveket ad a színkontraszt arányaira vonatkozóan.

Nemzetköziesítési (i18n) Megfontolások

Az API többnyelvű alkalmazásokban történő használatakor vegye figyelembe a következőket:

• Szöveg iránya: Győződjön meg arról, hogy a kiemelési stílusok helyesen működnek mind a balról jobbra (LTR), mind a jobbról balra (RTL) nyelvekkel.
• Szóhatárok: A különböző nyelvekben eltérő szabályok vonatkoznak a szóhatárokra. Ügyeljen arra, hogy a szavak vagy kifejezések kiemelésekor megfelelő szóhatár-felismerő algoritmusokat használjon.
• Karakterkészletek: Az API támogatja az Unicode-ot, így bármilyen nyelven kiemelhet szöveget.

Teljesítménybeli Megfontolások

Bár az API hatékony, fontos, hogy figyelemmel kísérje a teljesítményt. A nagyszámú kiemelés létrehozása és kezelése befolyásolhatja a teljesítményt, különösen nagy dokumentumokban. Fontolja meg ezeket a tippeket:

• Tartományok Létrehozásának Optimalizálása: A Range objektumok létrehozása költséges lehet. Használja újra a meglévő tartományokat, amikor csak lehetséges.
• Kötegelt Frissítések: Amikor több módosítást végez a kiemeléseken, kötegelje azokat egyetlen frissítésbe, hogy minimalizálja az újratördeléseket.
• Lusta Betöltés: Csak a felhasználó számára jelenleg látható szöveget emelje ki. További kiemeléseket töltse be, ahogy a felhasználó görget.
• Virtualizálás: Nagyon nagy dokumentumok esetén fontolja meg a virtualizációs technikák használatát, hogy csak a dokumentum látható részét renderelje.

Gyakorlati Példák és Kódrészletek

1. Példa: Dinamikus Kulcsszó Kiemelés

Ez a példa bemutatja, hogyan lehet dinamikusan kiemelni a kulcsszavakat egy szövegben a felhasználói bevitel alapján. Képzelje el, hogy egy felhasználó keresési lekérdezést ír be egy keresőmezőbe; a kiemelt kulcsszavak valós időben frissülnek.

            


  Ez egy példaszöveg. Kulcsszavakat tartalmaz, amelyeket ki akarunk emelni. A kulcsszavakat a felhasználói bevitel alapján fogjuk kiemelni.


            

              
                Copy
              
            
          

            
const keywordInput = document.getElementById('keyword-input');
const textContainer = document.getElementById('text-container');

keywordInput.addEventListener('input', () => {
  const keyword = keywordInput.value.trim();
  if (keyword) {
    highlightKeyword(keyword, textContainer);
  } else {
    clearHighlights(textContainer);
  }
});

function highlightKeyword(keyword, element) {
  clearHighlights(element);
  const text = element.textContent;
  let index = text.indexOf(keyword);

  if (index === -1) {
    return;
  }

  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + keyword.length);
    highlight.addRange(range);
    index = text.indexOf(keyword, index + 1);
  }

  CSS.highlights.set('dynamic-keyword', highlight);
}

function clearHighlights(element) {
  CSS.highlights.delete('dynamic-keyword');
}

            

              
                Copy
              
            
          

            
::highlight(dynamic-keyword) {
  background-color: rgba(255, 165, 0, 0.5); /* Félig átlátszó narancssárga */
  color: black;
}

            

              
                Copy
              
            
          

2. Példa: "Összes Keresése" Funkció Megvalósítása

Ez a példa egy "Összes Keresése" funkciót szimulál, hasonlóan a szövegszerkesztőkben és IDE-kben találhatóakhoz. A keresési kifejezés összes előfordulása egyszerre van kiemelve.

            


  Ez a dokumentum a keresési kifejezés több példányát tartalmazza. A keresési kifejezés ki lesz emelve a dokumentumban.
  Ez a keresési kifejezés egy második példánya. Itt van egy másik keresési kifejezés.


            

              
                Copy
              
            
          

            
const searchTermInput = document.getElementById('search-term');
const documentContent = document.getElementById('document-content');

searchTermInput.addEventListener('input', () => {
  const searchTerm = searchTermInput.value.trim();
  if (searchTerm) {
    findAll(searchTerm, documentContent);
  } else {
    clearFindAllHighlights(documentContent);
  }
});

function findAll(searchTerm, element) {
  clearFindAllHighlights(element);
  const text = element.textContent;
  let index = text.indexOf(searchTerm);
  const highlight = new Highlight();

  while (index !== -1) {
    const range = document.createRange();
    range.setStart(element.firstChild, index);
    range.setEnd(element.firstChild, index + searchTerm.length);
    highlight.addRange(range);
    index = text.indexOf(searchTerm, index + 1);
  }

  CSS.highlights.set('find-all', highlight);
}

function clearFindAllHighlights(element) {
  CSS.highlights.delete('find-all');
}

            

              
                Copy
              
            
          

            
::highlight(find-all) {
  background-color: #90EE90; /* Világoszöld */
  color: black;
}

            

              
                Copy
              
            
          

Böngésző Kompatibilitás és Polyfillek

A CSS Egyedi Kiemelés API egy viszonylag új funkció, ezért a böngészőkompatibilitás változó lehet. 2024 vége óta jó támogatást élvez a modern böngészőkben, mint például a Chrome, a Firefox, a Safari és az Edge. Azonban elengedhetetlen, hogy ellenőrizze a legfrissebb böngészőkompatibilitási adatokat olyan webhelyeken, mint a "Can I use...", hogy megbizonyosodjon arról, hogy a célközönsége használhatja a funkcióit. Ha régebbi böngészőket kell támogatnia, fontolja meg a polyfillek vagy alternatív megközelítések használatát, amelyek utánozzák az API funkcionalitását, bár ezek nem feltétlenül kínálják ugyanazt a teljesítményt vagy hűséget.

A Szövegkijelölés és Kiemelés Jövője

A CSS Egyedi Kiemelés API jelentős előrelépést jelent a webfejlesztésben, amely részletes vezérlést biztosít a fejlesztők számára a szövegkijelölés és kiemelés felett. Ahogy az API érik és a böngészőtámogatás javul, még több innovatív felhasználást várhatunk ettől a technológiától. A speciális szövegszerkesztőktől a kollaboratív dokumentumplatformokig a lehetőségek végtelenek. Ez az API gazdagabb, interaktívabb és akadálymentesebb felhasználói élményt tesz lehetővé. Gondolja át, hogyan használható ez a felhasználói élmény javítására a nemzetközi híroldalaktól az online nyelvtanulási platformokig.

Következtetés

A CSS Egyedi Kiemelés API egy hatékony eszköz dinamikus és interaktív felhasználói felületek létrehozásához. A tartományok, kiemelések és a HighlightRegistry alapvető fogalmainak megértésével kihasználhatja ezt az API-t, hogy lenyűgöző felhasználói élményeket építsen, amelyeket korábban nehéz vagy lehetetlen volt elérni. Az API feltárása során ne feledje figyelembe venni az akadálymentességet, a nemzetköziesítést és a teljesítményt, hogy biztosítsa, hogy alkalmazásai használhatók és jól teljesítenek a globális közönség számára. Rugalmasságával és vezérlésével a CSS Egyedi Kiemelés API arra hivatott, hogy a modern webfejlesztő eszköztárának elengedhetetlen részévé váljon.